<template>
	<view class="content">
		<view class="ll1">
			<swiper circular :indicator-dots="indicatorDots">
				<swiper-item v-for="item in list">
					<image :src="item" style="width: 100% ; height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="ll2">
			<view v-for="(item,i) in list2" class="tab-bar">
				<view class="tab-item" :class="{ active: currentTab === i }" @click="currentTab = i">{{item.name}}
				</view>
			</view>
		</view>
		<view class="ll4">
			<view v-for="(item,index) in list3" class="ll5">
				<view class="ll6">
					<image :src="item.goodImg"></image>
				</view>
				<view class="ll7">
					{{item.goodName}}
					<view class="ll8">
						<view class="ll9">
							{{item.goodPrice}}&nbsp;元
						</view>
						<view class="ll10">已售{{item.goodSold}}件</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入请求文件
	import {
		apiBanner,
		apiTabName,
		apiGoods
	} from '../../api/mock.js'
	export default {
		data() {
			return {
				list: [],
				list2: [],
				list3: [],
				indicatorDots: true,
				currentTab: 0
			}
		},
		onLoad() {
			uni.showLoading({
				title: '启动中...',
				mask: true,
			})
			//调用轮播函数
			this.getBanner();
			this.apiTabName();
			this.apiGoods();
		},
		methods: {

			// 调用请求轮播数据的函数
			getBanner() {
				//调用请求
				apiBanner('asc').then((res) => {
					uni.hideLoading();
					res.forEach((item) => {
						this.list.push(item);
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			apiTabName() {
				//调用请求
				apiTabName().then((res) => {
					uni.hideLoading();
					res.forEach((item) => {
						this.list2.push(item);
					})
					console.log(100);
					console.log(this.list2);
				}).catch((err) => {
					console.log(err);
				})
			},
			apiGoods() {
				//调用请求
				apiGoods('asc').then((res) => {
					uni.hideLoading();
					res.forEach((item) => {
						this.list3.push(item);
					})
					console.log(300);
					console.log(this.list3);
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.ll1 {
		width: 100%;

	}

	.ll1 image {
		width: 100%;
		height: 100%;
		/* height: 100%; */
	}

	.ll2 {
		width: 100%;
		margin-top: 3%;
		display: flex;

	}

	.ll3 {
		margin: 0 auto;
		font-size: 13px;
	}

	.tab-bar {

		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 15px;
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
	}

	.tab-item {

		padding: 10px;
		color: #000000;
		border-bottom: 3px solid transparent;
		/* 默认没有颜色 */
	}

	.tab-item.active {
		color: #ff0000;
		border-bottom-color: #ff0000;
		/* 活动状态下的颜色 */
	}

	.ll5 {
		border: 1px solid #e5e5e5;
		display: flex;
	}

	.ll6 {
		width: 30%;
		height: 120px;
	}

	.ll6 image {
		width: 100%;
		height: 100%;
	}

	.ll7 {
		width: 66%;
		font-size: 15px;
		margin-top: 4%;
	}

	.ll8 {
		display: flex;
		margin-top: 10%;
	}

	.ll9 {
		margin-left: 1%;
		color: red;
	}

	.ll10 {
		margin-left: 3%;
		color: #868686;
	}
</style>